<template>
  <page>
    <p-header :title="title"/>
    <StackLayout class="container">
      <Label class="title" :text="title"/>
      <GridLayout columns="*,auto" class="input-line">
        <TextField v-model="first" :hint="hint1? hint1 : 'Enter password'" col='0'
          autocorrect="false" autocapitalizationType="none" secure></TextField>
      </GridLayout>
      <GridLayout columns="*" class="input-line">
        <TextField v-model="second" :hint="hint2? hint2 : 'Repeat password'" col='0'
          autocorrect="false" autocapitalizationType="none" secure></TextField>
      </GridLayout>
      <Button class="confirm-btn" text="Confirm" :isEnabled="first.length > 0 && second.length >= 4 && !isLoading" @tap="confirm"/>
    </StackLayout>
  </page>
</template>
<script>
import Header from '../common/Header'
import PButton from '../common/PButton'
import { post } from '~/business/NetRequest'

export default {
  components: {
    'p-header': Header,
    'p-button': PButton
  },
  data() {
    return {
      first: '',
      second: '',
      isLoading: false,
    }
  },
  props: ['title', 'onConfirm', 'hint1', 'hint2', 'needCheckSame'],
  methods: {
    confirm() {
      if (this.needCheckSame && this.first != this.second) {
        alert('Tow passwords are not equal')
        return
      }
      const that = this
      this.isLoading = true
      this.onConfirm(this.first, this.second, () => {
          that.first = '';
          that.second = '';
          that.isLoading = false
      })
    }
  }
}
</script>
<style scoped>
  .container {
    background: #15253c;
    padding-left: 38;
    padding-right: 38;
  }
  .title {
    margin-top: 91;
    color: white;
    font-size: 24;
    font-family: 'PingFangSC';
  }
  .input-line {
    height:50;border-bottom-color:#264664;border-bottom-width:1px;
    margin-top: 20;
  }
  .input-line TextField{
    color:#ffffff;font-family:'PingFangSC-Regular';placeholder-color:#687889;
  }
  .confirm-btn {
    margin-top: 36;
    width: 100%;
    height: 50;
    background: linear-gradient(to right, #01C4E7, #0081D8);
    color: white;
    border-radius: 4;
  }
  .confirm-btn:disabled {
    background: #5480A8;
  }
</style>

